<template lang="html">
  <div class="">
    <div class="search-item">
      <mt-field placeholder="请输入用户ID或手机号" v-model="name" @blur.native.capture="changeSearch" @keydown="search($event)"></mt-field>
      <i @click="findUserList">
        <img class="max" src="/static/modules/transfer/assignor_icon_search@2x.png">
      </i>
    </div>

    <TeamItem ref="TeamItem" @getTurnUserId="getTurnUserId" />

    <div class="mask" v-show="showTransfer">
      <div class="mask-bg"></div>
      <div class="mask-wrap">
        <div class="mask-head">
          <img class="max" src="/static/modules/transfer/team_img_bg@2x.png">
        </div>
        <div class="mask-info">
          <p>您的云币：{{ myTurnCloud }}</p>
          <div class="mask-input">
            <input type="number" v-model="turnNum" placeholder="请输入需要转让的云币数量">
          </div>
          <div class="mask-submit" @click="clickTurn">
            确定转让
          </div>
        </div>
        <div class="mask-close" @click="showTransfer = false">
          <img class="max" src="/static/modules/transfer/close.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import TeamItem from './components/TeamItem'
import { getTurnCloud, turnCloud } from '@/api/transfer'
import { Toast } from "mint-ui";
export default {
  components: {
    TeamItem,
  },
  data() {
    return {
      showTransfer: false,
      name: null,
      myTurnCloud: null,
      turnNum: null,
      earningsid: null,
    }
  },
  created() {
    this.getTurnCloud();
  },
  methods: {
    search() {
      this.findUserList();
    },
    findUserList() {
      if(!this.name){
        Toast('请输入要查找的ID或手机号')
        return
      }
      this.$refs.TeamItem.findList(this.name)
    },
    // 清空输入框时，重置列表
    changeSearch(val) {
      if(val.target.value == ''){
        this.$refs.TeamItem.initOriginalList();
      }
    },
    getTurnCloud() {
      getTurnCloud({
        userid: this.getUserInfo().id
      }).then(res=>{
        this.myTurnCloud = res.data;
      })
    },
    // 转让云币
    clickTurn() {
      if(!this.turnNum){
        Toast('请输入需要转让的云币')
      }else if (parseInt(this.turnNum) < 1) {
        Toast('转让的云币数不能小于1')
      }else if (parseInt(this.turnNum) > parseInt(this.myTurnCloud)) {
        Toast('转让的云币不能大于我的云币')
      }else{
        turnCloud({
          myid: this.getUserInfo().id,
          earningsid: this.earningsid,
          money: parseInt(this.turnNum).toFixed(2),
        }).then(res=>{
          Toast(res.msg);
          this.showTransfer = false;
          this.turnNum = ''
          this.getTurnCloud();
        })
      }
    },
    // 接收转让云币的userID
    getTurnUserId(id) {
      this.showTransfer = true;
      this.earningsid = id;
    }
  }
}
</script>

<style lang="scss" scoped>
.search-item{
  margin: .4rem;
  position: relative;
  input{
    height: 1.2rem;
    padding: 3%;
    width: 100%;
    color: #888;
    font-size: .34rem;
    padding-left: 1rem;
  }
  i{
    position: absolute;
    top: 50%;
    margin-top: -.3rem;
    width: .5rem;
    left: .3rem;
  }
}

.mask{
  .mask-bg{
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.7);
  }
  .mask-wrap{
    position: fixed;
    z-index: 2;
    width: 8rem;
    height: 10rem;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
    .mask-info{
      background: url('/static/modules/transfer/team_img_bg_w@2x.png') no-repeat;
      background-size: 100% 100%;
      overflow: hidden;
      height: 6.6rem;
      border-radius:  0 0 4px 4px;
      p{
        margin-top: 1.4rem;
        color: #111;
      }
      input{
        background-color: #F4F4F4;
        padding: .3rem .5rem;
        margin-top: .5rem;
        font-size: .32rem;
        text-align: center;
      }
      .mask-submit{
        background-color: #B69664;
        border-radius: 1rem;
        text-align: center;
        color: #fff;
        line-height: 1.1rem;
        margin: 0 .8rem;
        margin-top: 1rem;
      }
    }
    .mask-close{
      margin-top: .6rem;
    }
  }
}
</style>

<style media="screen">
  .search-item .mint-field-core{
    padding-left: .8rem;
  }
</style>
